<template>
  <div class="basic">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>学校名单</span>
          <el-button type="primary" style="float: right" @click="submit"
            >保存</el-button
          >
          <el-button type="primary" style="float: right" @click="winopen"
            >导出</el-button
          >
        </div>
      </template>
      <el-table
        :data="tableData.value"
        v-if="tableData.value?.length > 0"
        border
        style="width: 100%; height: calc(100vh - 250px)"
      >
        <el-table-column prop="edu_sort" fixed label="教育厅序号" width="120">
          <template #default="scope">
            <el-input v-model="scope.row.edu_sort" placeholder="序号" />
          </template>
        </el-table-column>
        <el-table-column prop="match_sort" label="比赛序号" width="120">
          <template #default="scope">
            <el-input v-model="scope.row.match_sort" placeholder="序号" />
          </template>
        </el-table-column>
        <el-table-column label="学校名称">
          <template #default="scope">
            <el-input v-model="scope.row.school" placeholder="学校名称" />
          </template>
        </el-table-column>
        <el-table-column label="指导教师">
          <template #default="scope">
            <el-input v-model="scope.row.teacher" placeholder="指导教师" />
          </template>
        </el-table-column>
        <el-table-column label="成员1">
          <template #default="scope">
            <el-input v-model="scope.row.student[0]" placeholder="成员1" />
          </template>
        </el-table-column>
        <el-table-column label="成员2">
          <template #default="scope">
            <el-input v-model="scope.row.student[1]" placeholder="成员2" />
          </template>
        </el-table-column>
        <el-table-column label="成员3">
          <template #default="scope">
            <el-input v-model="scope.row.student[2]" placeholder="成员3" />
          </template>
        </el-table-column>
        <el-table-column label="成员4">
          <template #default="scope">
            <el-input v-model="scope.row.student[3]" placeholder="成员4" />
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="deltab(scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-button
        class="mt-4"
        type="primary"
        plain
        style="margin-top: 30px; width: 100%"
        @click="opendialog"
        >新增</el-button
      >
    </el-card>

    <schooldialog
      v-if="dialogVisible"
      :dialogVisible="dialogVisible"
      :linkid="1"
      @onSubmit="onSubmit"
      @cancal="cancal"
    ></schooldialog>
  </div>
</template>

<script setup lang="ts">
import schooldialog from "../../component/schooldialog/schooldialog.vue";
import { reactive, ref } from "vue";
import { edu_list, add_teams, export_name_list, del_team } from "../../api/api";
let tableData: any = reactive({ value: [] });

const getlist = () => {
  edu_list({}).then((res: any) => {
    tableData.value = res.data;
    console.log(tableData.value);
  });
};
getlist();

let dialogVisible = ref(false);
const opendialog = () => {
  dialogVisible.value = true;
};

const cancal = () => {
  dialogVisible.value = false;
};

const onSubmit = (value: any) => {
  dialogVisible.value = false;
  tableData.value.push(value);

  //调用接口
};

const winopen = () => {
  export_name_list({}).then((res: any) => {
    const blob = new Blob([res]);
    const linkNode = document.createElement("a");
    linkNode.download = "学校名单.doc";
    linkNode.style.display = "none";
    linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
    document.body.appendChild(linkNode);
    linkNode.click(); //模拟在按钮上的一次鼠标单击
    URL.revokeObjectURL(linkNode.href); // 释放URL 对象
    document.body.removeChild(linkNode);
  });
};

const submit = async () => {
  tableData.value.forEach((item: any, index: any) => {
    if (item.id) {
      delete item.id;
    }
  });
  await delfun();
  console.log(tableData.value);
  add_teams(tableData.value).then((res: any) => {
    getlist();
    if (res.code == 200) {
      ElMessage.success("成功");
    } else {
      ElMessage.warning(res.msg);
    }
  });
};
let isdel: any = [];
const deltab = (index: any) => {
  console.log(tableData.value);
  if (tableData.value[index]?.id) {
    isdel.push(tableData.value[index]?.id);
    tableData.value.splice(index, 1);
  } else {
    tableData.value.splice(index, 1);
  }
};

const delfun = async () => {
  if (isdel.length > 0) {
    await isdel.forEach(async (item: any) => {
      await del_team({ id: item });
    });
  }
};
</script>

<style lang="less" scoped>
.basic {
  // background: white;
  // padding: 30px;
  .el-card {
    min-height: calc(100vh - 104px);
  }
}
</style>
